/*
 *财务管理页面文件
 */
'use strict';
import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { formatTime } from '@app/constants/CommonFn.jsx';
import { Row, Col, Button, Icon, Card, Avatar, Breadcrumb, InputNumber, Progress, List, Modal, Spin, Divider, Table } from 'antd';
import {regionArray,projectData,endexData,analysisJson,adminUser,dynamic} from '@app/constants/DataSource.jsx';

class UserManage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading:true,
      data:projectData,
      visible:false,
      capital:0,
      key:-1
    };
  }

  componentDidMount(){
    setTimeout(() => {
    this.setState({loading:false});
    },300);
  }

  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = (e) => {
    projectData[this.state.key].capitalAll = projectData[this.state.key].capitalAll+this.state.capital;
    projectData[this.state.key].capitalIng = projectData[this.state.key].capitalIng+this.state.capital;
    dynamic.unshift({
      name:adminUser.name,
      title:projectData[this.state.key].title,
      action:'拨款了',
      flag:true,
      date:formatTime(new Date(),'yyyy-mm-dd hh:ff:ss'),
      key:dynamic.length
    });
    this.setState({
      visible: false,
    });
  }
  handleCancel = (e) => {
    this.setState({
      visible: false,
    });
  }

  onChange = (value) => {
    this.setState({capital:value});
  }
   
  render() {  

    const columns = [{
      title: '项目名称',
      dataIndex: 'title',
    }, {
      title: '项目状态',
      render: render => {
        let name;
        if(render.state === 0){
          name = '进行中';
        }else if(render.state === 1){
          name = '完成';
        }else if(render.state === 2){
          name = '终止';
        }
        return(<span>{name}</span>);
      }
    }, {
      title: '全部资金',
      dataIndex: 'capitalAll',
    }, {
      title: '可用资金',
      dataIndex: 'capitalIng',
    },{
      title: '已用资金',
      render: render => {
        let data = render.capitalAll - render.capitalIng;
        return(<span>{data}</span>);
      }
    },{
      title: '操作',
      render: render => {
        return(
          <p>
            <Button type="primary" style = {{marginRight:10}} size='small' onClick={() => {this.showModal();this.setState({key:render.key})}}>拨款</Button>
            <Button type="primary" size='small' onClick={() => {
              this.setState({key:render.key});
              projectData[render.key].capitalAll = projectData[render.key].capitalAll - projectData[render.key].capitalIng;
              projectData[render.key].capitalIng = 0;
            }}>回收</Button>
          </p>
        );
      }
    }];

    return (
      <div className = 'workbench'>
        <Row gutter = {16}>
          <Col span = {24}>
            <Card loading = {this.state.loading}>
              <Breadcrumb>
                <Breadcrumb.Item><Link to = '/Analysis'>首页</Link></Breadcrumb.Item>
                <Breadcrumb.Item>财务管理</Breadcrumb.Item>
              </Breadcrumb>
              <Table dataSource={this.state.data} columns={columns} />
            </Card>
          </Col>
         </Row>
         <Modal
          title="拨款"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          资金:<InputNumber min={0} max={100000} defaultValue={0} onChange = {this.onChange}/>
        </Modal>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
   
  }
}
export default connect(
  mapStateToProps, {
    
  }
)(UserManage)
